<template>
  <div id="tab">
    <div class="tabLeft">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiao2"></use>
      </svg>
    </div>
    <div class="topCenter">
      <span
        v-for="(i, index) in list"
        @click="activeClick(index)"
        :class="num == index ? 'active' : ''"
        >{{ i.name }}</span
      >
    </div>
    <div class="topRight">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
export default {
  setup() {
    const all = {
      list: [
        { name: "我的" },
        { name: "发现" },
        { name: "云村" },
        { name: "视频" },
      ],
      num: 1,
    };

    return { ...toRefs(all) };
  },

  methods: {
    activeClick(num) {
      this.num = num;
      console.log(this.num, num, "为啥状态不改变");
      this.$forceUpdate(); // 视图为啥没更新呢
    },
    actives(num) {
      if (num == this.num) {
        return "active";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.icon {
  width: 0.4rem;
  height: 0.4rem;
}
#tab {
  display: flex;
  padding: 0.2rem;
  height: 0.8rem;
  width: 7.5rem;
  justify-content: space-between;
}
.topCenter {
  display: flex;
  height: 0.5rem;
  align-items: center;
  justify-content: space-around;
  width: 4.5rem;
}
.active {
  font-weight: 900;
  color: red;
  font-size: 0.25rem;
}
</style>